<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>商家列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
	<script type="text/jscript" th:src="@{/plugin/layui/layui.js}" charset="UTF-8"></script>
	<script type="text/jscript" th:src="@{/plugin/jquery/jquery.min.js}"></script>
</head>
<body>
	<div class="site-text" style="margin: 5%; display: none" id="window"  target="test123">	
			<table class="layui-hide" id="demo2" lay-filter="test"></table>
	</div>
	<table class="layui-hide" id="demo" lay-filter="test"></table>
	<script type="text/html" id="barDemo" >
		<a class="layui-btn layui-btn-xs" lay-event="getMsg">查看详情</a>
</script>
	<script type="text/javascript"  th:inline="none">
	layui.use(['laydate', 'laypage', 'layer', 'table', 'upload', 'element','form'], function(){
		  var laydate = layui.laydate //日期
		  ,laypage = layui.laypage //分页
		  ,layer = layui.layer //弹层
		  ,table = layui.table //表格
		  ,upload = layui.upload //上传
		  ,element = layui.element //元素操作
		  ,form = layui.form
		  ,$=layui.$;
		  
		  //监听Tab切换
		  element.on('tab(demo)', function(data){
		    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
		      tips: 1
		    });
		  });
		 
		  
	//table
	 table.render({
		    elem: '#demo'
		    ,height: 420
		    ,url: 'selectAllOrdersByStoreId' //数据接口
		    ,title: '用户表'
		    ,height : 'full-75'
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {type: 'checkbox', fixed: 'left'}
		      ,{field: 'order_uuid', title: '订单号', width:400, sort: true, fixed: 'left'}
		      ,{field: 'order_createtime', title: '创建时间', width:400}
		      ,{field: 'total_price', title: '总价', width: 100, sort: true}
		      ,{templet:function(data){
		    	  if(data.state==0)return "未支付";
		    	  if(data.state==1)return "已支付";
	          },title:'支付状态',width: 100, sort: true}
		      ,{fixed: 'right', width: 400, align:'center', toolbar: '#barDemo'}
		    ]]
		  });
	
		layui.use('table', function() {
			var table = layui.table;

		});
		  
		  //监听行工具事件
		  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
		    var data = obj.data //获得当前行数据
		    ,layEvent = obj.event; //获得 lay-event 对应的值
		    table.render({
			    elem: '#demo2'
			    ,height: 420
			    ,url: 'selectOneOrder?order_uuid='+data.order_uuid //数据接口
			    ,title: '用户表'
			    ,page: true //开启分页
			    ,cols: [[ //表头
			      {type: 'checkbox', fixed: 'left'}
			      ,{templet:function(data){
		        	  return data.good.good_name;
		          },title:'商品',width: 245, sort: true}
		          ,{templet:function(data){
		        	  return data.good.unit_price;
		          },title:'单价',width: 200, sort: true}
			      ,{field: 'count', title: '数量', width: 200, sort: true}
			      ,{field: 'subtotal', title: '总价', width:200, sort: true}
			    ]]
			  });
		    //模板方法
		    if(layEvent === 'getMsg'){
		    	layer.open({
		        	type: 1 
		        	   ,area:["1000px","700px"]
		               ,title: ['订单详情']
		               ,btn: ['确定'] 
		               ,shadeClose: true
		               ,shade: 0 
		               ,maxmin: true 
		               ,content: $("#window")
		        });
		    	
		    	
		    	
		    } 
		  });
	});
	</script>
</body>
</html>